<template>
  <!-- padding-bottom: calc(env(safe-area-inset-bottom) / 2) -->
  <view class="w-full bg-white rounded-t-[1rem] s transition-all duration-300">
    <view class="grid grid-cols-3 p-2">
      <view
        class="active:scale-95 flex flex-col col-span-1 gap-1 justify-center items-center transition-transform duration-200"
        @click="jumpTo('/pages/index/index')"
      >
        <view class="size-[1.5rem]">
          <image
            :src="tabbarIndex == 1 ? '/static/dddr79.png' : '/static/dddr78.png'"
            class="size-full transition-all duration-300"
            mode="aspectFill"
          />
        </view>
        <view
          class="text-[.5625rem] transition-all duration-300"
          :class="tabbarIndex == 1 ? 'text-[#00050D] font-bold' : 'text-[#797C81]'"
        >
          首页
        </view>
      </view>

      <view class="flex relative col-span-1 justify-center" @click="show = true">
        <view
          class="size-[3rem] absolute left-1/2 -translate-x-1/2 -top-5 active:scale-95 transition-transform duration-300 z-10"
        >
          <image src="/static/dddr82.png" class="size-full" mode="aspectFill" />
        </view>
      </view>

      <view
        class="active:scale-95 flex flex-col col-span-1 gap-1 justify-center items-center transition-transform duration-200"
        @click="jumpTo('/pages/my/index')"
      >
        <view class="size-[1.5rem]">
          <image
            :src="tabbarIndex == 2 ? '/static/dddr81.png' : '/static/dddr80.png'"
            class="size-full transition-all duration-300"
            mode="aspectFill"
          />
        </view>
        <view
          class="text-[.5625rem] transition-all duration-300"
          :class="tabbarIndex == 2 ? 'text-[#00050D] font-bold' : 'text-[#797C81]'"
        >
          我的
        </view>
      </view>
    </view>
    <!-- 发布弹框 -->
    <!-- 发布弹框 -->
    <u-popup v-model="show" mode="bottom" border-radius="16" class="">
      <view class="backgroundImage bg-center bg-no-repeat bg-cover">
        <view class="p-[1.25rem] flex flex-col gap-5 pt-[2.5rem]">
          <view class="flex flex-col">
            <view class="font-bold text-[2.5rem] text-[#161A24]"> 发布 </view>
            <view class="text-[1.125rem] text-[#161A24]">晒钓点，解锁钓鱼新乐趣。 </view>
          </view>
          <view
            class="bg-[#FFFFFF] shadow-[0rem_.125rem_1rem_0rem_rgba(55,114,110,0.06)] rounded-[1rem] p-[1.125rem] flex justify-between"
            @click="jump(1)"
          >
            <view class="flex gap-3 items-center">
              <view class="size-[3.125rem] overflow-hidden">
                <image src="/static/dddr33.png" mode="aspectFill" class="size-full" />
              </view>
              <view class="flex flex-col">
                <view class="text-[1.125rem] text-[#2D3038] font-bold"> 手杆标点 </view>
                <view class="text-[.75rem] text-[#5C6068]"> 精准垂钓，分享每一竿的惊喜收获。 </view>
              </view>
            </view>
            <u-icon name="arrow-right" color="#00050D" class="font-bold"></u-icon>
          </view>
          <view
            class="bg-[#FFFFFF] shadow-[0rem_.125rem_1rem_0rem_rgba(55,114,110,0.06)] rounded-[1rem] p-[1.125rem] flex justify-between"
            @click="jump(2)"
          >
            <view class="flex gap-3 items-center">
              <view class="size-[3.125rem] overflow-hidden">
                <image src="/static/dddr26.png" mode="aspectFill" class="size-full" />
              </view>
              <view class="flex flex-col">
                <view class="text-[1.125rem] text-[#2D3038] font-bold"> 路亚标点 </view>
                <view class="text-[.75rem] text-[#5C6068]"> 精准定位，探索水域深处的新世界。 </view>
              </view>
            </view>
            <u-icon name="arrow-right" color="#00050D" class="font-bold"></u-icon>
          </view>

          <view class="flex justify-center mt-[2.5rem]">
            <view
              class="w-[3.375rem] h-[3.375rem] bg-[#F0F1F3] rounded-[1rem] flex justify-center items-center"
              @click="show = false"
            >
              <u-icon name="close" color="#00050D" class="font-bold"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 未认证弹框 -->
    <!-- 未认证弹框 -->
    <!-- @click="joinNow" -->
    <!-- 575 -->
    <u-popup v-model="showAuth" mode="center" length="88%" ddd>
      <view class="flex relative flex-col px-4 py-20">
        <view class="h-[9rem] flex flex-col justify-end relative">
          <view class="h-[6.625rem]">
            <image src="/static/dddr125.png" mode="widthFix" class="size-full" />
          </view>
          <image src="/static/dddr126.png" mode="widthFix" class="absolute bottom-0 -right-4" />
        </view>
        <view
          class="flex flex-col justify-center items-center px-4 py-7 w-full bg-[#fff] rounded-b-[1rem] overflow-hidden"
        >
          <view class="text-[1.25rem] text-[#16191F] font-bold"> 秘密钓点开放招募 </view>
          <view class="mt-3 text-center"> 变现通道已开启，前500名免费入驻，永久无门槛享佣金！独家特权速抢。 </view>
          <view
            class="w-[13.375rem] h-[2.5rem] bg-[#00A9AB] rounded-[1.25rem] flex justify-center items-center mt-7"
            @click="joinNow"
          >
            <view class="text-[.875rem] text-[#FFFFFF] font-black">立即入驻</view>
          </view>
        </view>
        <image
          @click="showAuth = false"
          src="/static/dddr127.png"
          mode="aspectFill"
          class="size-9 absolute left-[50%] -bottom-0 translate-x-[-50%]"
        />
      </view>
    </u-popup>
    <!-- 审核中 -->
    <yy-reviewFailed :show="showReviewFailed" @update:show="showReviewFailed = $event"></yy-reviewFailed>
    <!-- 审核失败 -->
    <yy-auditFailed
      :show="showAuditFailed"
      @update:show="showAuditFailed = $event"
      @resubmit="resubmit"
    ></yy-auditFailed>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        list: [
          {
            name: '首页',
            icon: '/static/dddr77.png',
            icon2: '/static/dddr78.png'
          },
          {
            name: '我的',
            icon: '/static/dddr81.png',
            icon2: '/static/dddr80.png'
          }
        ],
        showAuth: false,
        joinNowTitle: '立即入驻',
        showReviewFailed: false,
        showAuditFailed: false
      }
    },
    props: {
      tabbarIndex: {
        type: Number
      }
    },

    methods: {
      resubmit() {
        vk.navigateTo({
          url: '/pages/my/settled'
        })
      },
      jumpTo(e) {
        console.log('e==> ', e)
        // vk.switchTab(e)
        vk.navigateTo({ url: e })
        vk.myfn.vibrate()
      },
      joinNow() {
        if (this.joinNowTitle == '立即入驻' || this.joinNowTitle == '审核未通过') {
          this.showAuth = false
          vk.navigateTo('/pages/my/settled')
        }
      },
      async jump(e) {
        vk.showLoading('加载中...')
        let res = await api.joinDarenStatus()
        let entryStatus = res.data.status
        console.log('entryStatus==> ', entryStatus)
        //未入驻
        vk.hideLoading()
        if (entryStatus == -1) {
          this.showAuth = true
        }
        //审核中
        if (entryStatus == 0) {
          this.showReviewFailed = true
        }
        //审核成功
        if (entryStatus == 1) {
          this.show = false
          if (e == 1) {
            vk.navigateTo('/pages/index/release')
          }
          if (e == 2) {
            vk.navigateTo('/pages/index/lure')
          }
        }
        //审核未通过
        if (entryStatus == 2) {
          this.showAuditFailed = true
        }

        // if (is_creator) {
        //   this.show = false
        //   if (e == 1) {
        //     vk.navigateTo('/pages/index/release')
        //   }
        //   if (e == 2) {
        //     vk.navigateTo('/pages/index/lure')
        //   }
        // } else {
        //   await vk.vuex.dispatch('$user/getUserInfo')
        //   this.showAuth = true
        // }

        // if (!vk.getVuex('$user.userInfo.is_creator')) {
        //   vk.confirm('您需要成为达人才能发布内容哦~\n请前往个人中心点击"达人入驻"，审核通过后即可发布', '温馨提示', '去申请', '取消', res => {
        //     if (res.confirm) {
        //       this.show = false

        //     }
        //   })
        //   return
        // }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .s {
    box-shadow: 0rem -0.25rem 0.5rem 0rem rgba(0, 0, 0, 0.04);
  }

  .backgroundImage {
    background-image: url('/static/dddr67.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    width: 100% !important;
    height: 100% !important;
  }
</style>
